<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>角色管理</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/admin.css">
    <link rel="stylesheet" href="../css/role.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
</head>
<style>
 .container{
 display: flex;
 background-color:#F3F3F3;
}
.bg-gray{
  background-color: #dfdfdf;
}
.Property-right{
      margin-top:20px;
      height: 580px;
      flex:1;
      display: inline-block;
      margin-left: 30px;
      margin-right:30px;
 /*   display: none; */
}
.right-top{
      width: 100%;
      height: 50px;
      background-color: #fff;
}
.pic-3{
      width: 26px;
      height: 26px;
      margin:10px;
      color: #E5BA70;
}
.pic-4{
      width: 26px;
      height:26px;
      margin:10px;
      color: #888;
}
.right-top .right{
     background-color: #fff;
     color: #2C283C;
     display: inline-block;
}
 .right-top .left-1,.right-top .left-2{
   color:#000;
   background-color: #fff;
 }
 .layui-table th{
   width:60px;
 }
 .layui-table[lay-skin=line] td, .layui-table[lay-skin=line] th{
  text-align:center;
 }
  .layui-layer-iframe{
    border-radius:10px;
  }
 tr .check{
    width: 20px;
  }
  #page-num{
    display: inline-block;
 }
 .layui-laypage a, .layui-laypage span{
  border:none;
  border-radius:30px;
  text-align: center;
  width: 20px;
  height: 20px;
  line-height:20px;
  padding:0;
  margin-left:3px;
 }
 .layui-laypage>:first-child, .layui-laypage>:first-child em{
  border-radius:30px;
 }
.layui-laypage>:last-child, .layui-laypage>:last-child em{
  border-radius:30px;
}
.layui-laypage .layui-laypage-curr .layui-laypage-em{
  border-radius:30px;
  background-color: #EF7632;
}
#page-fen{
    display: inline-block;
    float: right;
}
#page-counter{
  display: inline-block;
}
#page-num{
display: inline-block;
margin-left:15px;
margin-right:30px;
}
/* 弹出框样式  */
#layui-layer1  .layui-layer-title{
  border-bottom:none;
  text-align: center;
  background-color: #fff;
  border-radius:10px;
}
/* 弹出框样式 */
body .layui-layer{
  border-radius:10px;
}
div.layui-layer-title {
  padding: 0;
  border-bottom: 0;
  background-color: #fff;
}
 .table-pass{
  width:60px;
  border:0;
 }
  form{
    float:left;
    margin-top:10px;
    display: inline-block;
  }
  .layui-layer-btn,.layui-layer-content{
    text-align:center;
  }
</style>
<body>
  <div class="container">
      <!-- 右边表格模块-->
      <div class="section-right">
              <div class="right-top">
   <button class="layui-btn layui-btn-normal  left-1 "><span class="pic-3     iconfont icon-tianjiarenyuan"></span>角色添加</button>
        <button class="layui-btn layui-btn-danger  del-r right"><span class="pic-4 iconfont icon-shanchu"></span>删除</button>
        <button class="layui-btn layui-btn-normal add right fix-r" id="fix-r"><span class="pic-4 iconfont icon-modify"></span>修改</button>
           </div>

<!--  table部分 -->
<div class="detail">
        <table class="layui-table" lay-skin="line" id="table">
      <thead >
         <tr>
           <th></th>
           <th>角色名称</th>
           <th>所属权限</th>
           <th></th>
           <th></th>
         </tr>
      </thead>
      <tbody class="org-table">
      </tbody>
      </table>
    <div id="page-fen">
        <div id="page-num"></div>
    </div>
  </div>
    </div>
  </div>
  <script src="../lib/jquery.js" type="text/javascript"></script>
  <script type="text/javascript" src="../layui/layui.js"></script>
  <script src="../lib/js/jquery.cookie.js" type="text/javascript"></script>
  <script>
      layui.use(['jquery','form','laypage','element','layer'], function(){
        var element = layui.element;
        var $ = layui.jquery;
        var laypage = layui.laypage;
        var form=layui.form();

        var params={};

      // 删除操作
   delData();
   function delData(currentData){
       $(document).off("click", ".del-r").on("click", ".del-r", function() {
              if(currentData){
                  layer.open({
                    /*type:1,*/
                    shade:[0.1, '#fff']
                 /* ,area:['200px', '180px']*/
                 ,title:['删除操作','font-weight:600;text-align:center;font-size:16px;border-radius:10px;']
                 ,content: '您确认要删除吗？'
                 ,btn: ['取消', '确认']
                 ,yes: function(index, layero){
                       layer.closeAll();
                  }
                  ,btn2: function(index, layero){
                    var role_id = currentData.role_id;
                    console.log(role_id);
                    $.ajax({
                        url: '../../role_manage/delRole',
                        type: 'post',
                        dataType: 'json',
                        data:{
                         role_id:role_id
                        }
                    })
                    .done(function() {
                    layer.msg('删除成功！',{time: 1000});
                    window.location.reload();
                    })
                    .fail(function() {
                        console.log("error");
                    });
                        layer.closeAll();
                 }
            })
           }else{
              alert("请先选中一条数据del");
            }
          });
       };
          //点击删除角色
      //修改当前数据function
      xiugai();
      function xiugai(currentData){
         $(document).off("click", ".fix-r").on("click", ".fix-r", function() {
              if(currentData){
                  layer.open({
                  type:2
                  ,shade:[0.1, '#fff']
                  ,area:['355px', '300px']
                  ,title:['修改信息','font-weight:600;text-align:center;font-size:16px;border-radius:10px;']
                ,content: 'fix-role.html',
                success: function(layero, index){
                   var body = layer.getChildFrame('body', index);
                       body.contents().find("#role_name").val(currentData.role_name);
              }
            })
           }else{
              alert("请先选中一条数据fix");
            }
          })
     };

// 添加
     $(document).off("click", ".left-1").on("click", ".left-1", function() {
          layer.open({
             type:2
            ,fix: false
        /*  , closeBtn:0*/
            ,shade:[0.1, '#fff'] //遮罩透明度
            ,area:['355px', '300px']
         ,title:['角色添加','font-weight:600;text-align:center;font-size:16px;border-radius:10px;']
            ,content: 'add-role.html',
            success: function(layero, index){
               searchTable();
              }
        });
      });
// 添加

// 获取列表
      var pages = {};
      searchTable();
      function searchTable(current_page){
        var tableData;
          $.ajax({
              url: '../../role_manage/queryWuyeRoles',
              type: 'get',
              dataType: 'json',
              data:{
                  current_page:current_page || 1,
                  limit:10
                   }
                 })//ajax
          .done(function(response){
                  console.log("success",response);

          if(response.resultCode == '200'){
               var str= '';
               var tabs='';

          if(response.page.list.length){
              tableData = response.page.list;
                   console.log(tableData);

            for(var i=0;i<tableData.length;i++){

              var powersData = tableData[i].powers;
                  console.log(powersData);

              var powersListBox = '';

              for(var j=0, tabs = powersData.length;  j<tabs;  j++){

                  powersListBox +=
                      "<span>"+powersData[j].power_description+" "+"</span>"
                 }
            str +=
            '<tr data-id="'+ response.page.list[i].role_id +'">'+
            '<td class="check"><input data-id="'+ response.page.list[i].role_id +'" type="radio" name="role_items" title="" lay-filter="test" lay-skin="primary"></td>'+
            '<td id="name-r">'+ response.page.list[i].role_name +'</td>'+
            '<td id="limit-r">'+ powersListBox +'</td>'+
            '<td></td>'+
            '<td></td>'+
            '</tr>'

           }
          $(".org-table").html(str);

     //选中当前行
          $("#table>tbody>tr>td>input").change(function(){
              console.log(123);
         if($(this).is(':checked')){
              console.log("选中1");
              var currentId = $(this).attr("data-id");
              for(var i=0;i<tableData.length;i++){
                if(tableData[i].role_id == currentId){
                  var currentData = tableData[i];

                }
              }
            }else{
              var currentId = '';
            }
            $("#table tbody tr td input").removeClass('bg-gray');
            $(this).addClass('bg-gray');
                console.log(currentId );
                console.log(currentData);
              localStorage.setItem("roleID", currentData.role_id);

                xiugai(currentData);
                delData(currentData);
          });//选中tr

  //分页显示
          pages.total = response.page.total;
          console.log(pages.total);

          pages.current_page = response.page.current_page;

          pages.totalPages = Math.ceil(pages.total/10);
          console.log(pages.totalPages);
           /*显示分页*/
         laypage({
            cont: 'page-num' //容器。值支持id名、原生dom对象，jquery对象
            ,pages:pages.totalPages      //通过后台拿到的总条数
            // skip: true, 是否开启跳页
            ,curr: pages.current_page //当前页
            ,first: 1
            ,last:false
            ,prev: '<em><</em>'
            ,next: '<em>></em>'
            ,jump: function(obj, first){ //触发分页后的回调
                var curr = obj.curr;
                console.log(curr);
            if(!first){
                   searchTable(obj.curr);
                }
              }
          })//page
          }//if
        else{
          str = '<tr><td colspan="7">暂无数据</td></tr>';
          $(".org-table").html(str);
          }
       }//if
        })//done
           .fail(function(response){
              console.log("fail",response);
            })//fail
          };// seach
    });//模块加载
  </script>
</body>
</html>
